(function (io) {
    let emitBtn = document.querySelector('#emit')
    let logoutBtn = document.querySelector("#logout")
    // let token = prompt('请输入密钥！', '')
    let socketConfig = {
        auth: {
            token: '123456' // 123456
        }
    }
    let socket = io(socketConfig);

    socket.on('getDataSuccessful', (event) => {
        console.log(event)
    })
    socket.on("connect", () => {
        console.log(socket.id, `连接成功！`); // x8WIv7-mJelg7on_ALbx
    });
    let galleryArr = []

    socket.on('getList', data => {
        let listDOM = document.querySelector('#images') || null;
        let imgCollect = []
        let createTag = tagName => document.createElement(tagName);
        if (listDOM) {
            let {result_list: {map_data}} = data;
            for (let i = 0; i < map_data.length; i++) {
                (function (img, imgCollect) {
                    let item = map_data[i]
                    img.src = item['pict_url'] || ''
                    if (img.src === '') {
                        img.alt = item['short_title'] || '资料获取失败'
                    }
                    let li = createTag('li')
                    li.appendChild(img)
                    imgCollect.push(img)
                })(new Image(200, 300), imgCollect)
            }
        }
        listDOM.innerHTML = '';
        for (let i = 0; i < imgCollect.length; i++) listDOM.appendChild(imgCollect[i])
        // const viewer = new Viewer(document.getElementById('images'), {
        //     inline: true,
        //     viewed() {
        //         viewer.zoomTo(1);
        //     },
        // });
// Then, show the image by clicking it, or call `viewer.show()`.

// View a list of images.
// Note: All images within the container will be found by calling `element.querySelectorAll('img')`.
        let createViewer = dom=>{
            new Viewer(dom)
        }
createViewer(document.getElementById('images'))



// Then, show one image by click it, or call `gallery.show()`.
    })

    socket.on('unConnect', val => {
        console.log(val)
        alert('链接失败! ' + val)
    })

    socket.on("disconnect", () => {
        console.log('服务端主动断开！！'); // undefined
        socket.disconnect()
    });

    emitBtn.onclick = () => {
        socket.emit('fuck', 'fuck!!!!')
    }
    logoutBtn.addEventListener('click', (event) => {
        event.preventDefault()
        socket.emit('close', (new Date()))
    })
    let page_no = 0;
    document.querySelector('#get-list').addEventListener('click', (evt) => {
        evt.preventDefault()
        socket.emit('getList', {
            keyword: document.querySelector('#goodsType').value || '性感',
            page_no: page_no++
        }, 'getList', location.href)
    })
})(io || new WebSocket(undefined, undefined))